<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport">
    <title>Home</title>
    <meta name="description" content="">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
    }
    #conter {
        width: 1000px;
        margin: auto;
    }
    #help-left {
        width: 200px;
        font-family: 'microsoft YaHei';
        float: left;
    }

    .menu {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .menu:last-child {
        border-bottom: 1px solid #ccc;
    }
    .menu summary {
        height: 40px;
        line-height: 40px;
        text-indent: 10px;
        outline: none;
        font-size: 14px;
        font-weight: 700;
        border-top: 1px solid #ddd;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FEFEFE), color-stop(1, #CCCCCC));
        cursor: pointer;
    }
    .menu summary::-webkit-details-marker {
        display: none;
    }

    /*可用图片或字符,如果使用图片，请把content的值设置成空字符*/
    .menu summary:before {
        content: "+";
        /*background: url(../Images/right.png) no-repeat center center;*/ /*收起时的图片*/
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 10px;
        font-size:18px;
        font-weight:700;
    }
    .menu[open] summary:before {
        content: "-";
        /*background: url(../Images/down.png) no-repeat center center;*/ /*展开时的图片*/
    }
    .menu ul {
        padding: 10px 0;
    }
    .menu ul li {
        list-style: none;
        text-indent: 25px;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
    }
    .menu ul li a {
        display: block;
        color: #666;
    }
    .menu ul li a:hover {
        text-decoration: underline;
    }

    /* 名称 */
    .title{
        font-size: 25px;
        font-weight: bold;
        color: cadetblue;
        margin-top: 70px;
        margin-bottom: 20px;
        margin-left: 80px;
        font-family: fantasy;
    }

    /* 下面是搜索框样式 */
    .searchBox{
        width: 60%;
        height: 35px;
        border: 1px solid cadetblue;
        outline: hidden;
        border-radius: 2px;
        margin:  auto;
        position: absolute;
    }
    .inputBox{
        border: none;
        width: 100%;
        height: 35px;
        line-height: 35px;
        outline: none;
        padding-left: 10px;
        /* 改变光标的颜色 */
        caret-color:#008B8B;
        font-size: 14px;
    }
    .searchBtn{
        width: 100px;
        height: 50px;
        border: none;
        right: 0;
        outline: none;
        color: white;
        font-size: 15px;
        background-color: cornflowerblue;
        text-align:center;
        position: absolute;
    }

    /* 鼠标滑过按钮时背景色改变 */
    .searchBtn:hover{
        background-color: dimgrey;
    }
</style>
<body>
<link rel="stylesheet" type="text/css"  href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a class="navbar-brand page-scroll" href="#page-top">西安文理学院社团管理系统</a>
        </div>
        <nav>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.jsp">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/CommunityServlet?method=findCommunityCategory">社团</a></li>
                    <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHonorWall">荣誉墙</a></li>
                    <li><a href="${pageContext.request.contextPath}/IndexServlet?method=findHallOfFame">名人堂</a></li>
                    <li><a href="${pageContext.request.contextPath}/Report.jsp">匿名投诉</a></li>
                    <li><a href="${pageContext.request.contextPath}/loginForm.jsp">登录</a></li>
                    <li><a href="${pageContext.request.contextPath}/StudentServlet?method=findFactoryId">注册</a></li>
                    <c:if test="${ not empty student}">
                        <li><a href="${pageContext.request.contextPath}/person/personInfo.jsp">我的</a></li>
                    </c:if>
                </ul>
            </div>
        </nav>
    </div>
</nav>
<div style="margin-bottom: 50px;margin-top: 15%;">
    <div>
        <section id="conter">
            <section id="help-left">
                <c:forEach items="${categories}" var="cg">
                    <details class="menu" open>
                    <summary><a href="${pageContext.request.contextPath}/CommunityServlet?method=findCommunityByCategory&cgid=${cg.cgid}">${cg.cgname}</a></summary>
                     <c:forEach items="${communities}" var="c">
                         <c:if test="${cg.cgid eq c.ccategory}">
                        <ul>
                            <li><a href="${pageContext.request.contextPath}/CommunityServlet?method=findCommunityByName&cname=${c.cname}">${c.cname}</a></li>
                        </ul>
                         </c:if>
                     </c:forEach>
                </details>
                </c:forEach>
            </section>
        </section>
    </div>
    <div style="float: right;position: relative;width: 50%;left: -5%;top:-100px;">
        <div class="title">
            <p>请&nbsp;输&nbsp;入&nbsp;社&nbsp;团&nbsp;相&nbsp;关&nbsp;信&nbsp;息</p>
        </div>
        <div class="searchBox">
            <form action="${pageContext.request.contextPath}/CommunityServlet?method=findCommunityByName" method="post">
            <input  name="cname" class="inputBox" placeholder="输入社团名">
                <input  type="submit" value="搜索" class="searchBtn">
            </form>
            <h3 id="msg" style="color: red;">${msg}</h3>
        </div>
    </div>
</div>
<div  style="text-align: center;position: fixed;bottom: 0px;left: 50%;">
    <br />
    Copyright © 雪绒花小组
</div>
</body>
</html>
